<template>
  <div class="page">
    <CommonList
      ref="commonListRef"
      :requestUrl="requestUrl"
      :columns="columns"
      :queryFormItems="queryFormItems"
      :actions="['create', 'update', 'remove']"
      @create="handCreate"
      @update="handUpdate"
      @remove="handRemove"
    ></CommonList>

    <el-drawer v-model="open" title="添加|编辑栏目">
      <el-form
        ref="categoryFormRef"
        :model="categoryForm"
        :rules="categoryRules"
        label-width="120px"
      >
        <el-form-item label="栏目名称" prop="name">
          <el-input v-model="categoryForm.name" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="categoryForm.remark" type="textarea" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handSubmit"> 保存 </el-button>
          <el-button @click="handCancel"> 取消 </el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>
<script lang="ts" setup>
import CommonList from '@/components/CommonList.vue'
import { ElNotification, type FormInstance, type FormRules } from 'element-plus'
import { reactive, ref } from 'vue'
import { categoryCreate, categoryDelete, categoryUpdate } from '@/api/content'

const requestUrl = 'contentCategories'
const columns = [
  { prop: 'name', label: '名称' },
  { prop: 'remark', label: '备注' },
  { prop: 'create_time', label: '创建时间' },
  { prop: 'action', width: '100' }
]
const queryFormItems = [{ prop: 'name', label: '名称' }]

const open = ref(false)

const categoryFormRef = ref<FormInstance>()
const commonListRef = ref()

const categoryForm = reactive<ContentCategory>({
  id: 0,
  name: '',
  remark: ''
})
const categoryRules = reactive<FormRules<ContentCategory>>({
  name: [
    { required: true, message: '请输入栏目名称', trigger: 'blur' },
    { min: 2, max: 6, message: '长度应为2到6个字符', trigger: 'blur' }
  ]
})
function handCreate() {
  open.value = true
  resetForm()
}
function handUpdate(row: ContentCategory) {
  open.value = true
  resetForm()
  categoryForm.id = row.id
  categoryForm.name = row.name
  categoryForm.remark = row.remark
}
function handSubmit() {
  if (!categoryFormRef.value) return
  categoryFormRef.value.validate(async (valid) => {
    if (!valid) return
    try {
      if (categoryForm.id !== 0) {
        await categoryUpdate(categoryForm)
      } else {
        await categoryCreate(categoryForm)
      }
      open.value = false
      commonListRef.value?.handQuery()
      ElNotification({
        title: '提示',
        message: '保存成功',
        type: 'success'
      })
    } catch (error) {
      console.log(error)
    }
  })
}

function handCancel() {
  open.value = false
}
const resetForm = () => {
  if (!categoryFormRef.value) return
  categoryFormRef.value.resetFields()
}

async function handRemove(row: ContentCategory) {
  try {
    await categoryDelete(row.id)
    commonListRef.value?.handQuery()
    ElNotification({
      title: '提示',
      message: '删除成功',
      type: 'success'
    })
  } catch (error) {
    //
  }
}
</script>

<style lang="scss" scoped>
.page {
}
</style>
